<template>
	<ui-sys title="扩展图标库">
		<view class="ui-container">
			<ui-title title="扩展图标库" depth="2" isIcon></ui-title>
			<view class="paragraph">
				选用 iconfont.com 的常用图标作为扩展。你可以在
				<ui-code>@/app/scss/icon</ui-code>
				中移除
				<ui-code>coloricon</ui-code>
				这个图标库.
				<ui-code>.cicon-{name}</ui-code>
			</view>
			<view class="ui-icon-list ui-grid ui-cols-4 mt-3">
				<view class="ui-item" v-for="(item, index) in list" :key="index">
					<view class="py-4 border radius ui-BG" style="height: 100%;">
						<view class="text-cut mt-2 icon-xxl p-4 ui-TC"><text :class="[`cicon-${item}`]"></text></view>
						<view class="text-cut mt-2 text-xs text-grey">{{ item }}</view>
					</view>
				</view>
			</view>
		</view>
	</ui-sys>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			grid: true,
			list: [
				'Aa',
				'accounts',
				'accounts-o',
				'add',
				'add-round',
				'add-round-o',
				'alarm',
				'album',
				'alipay',
				'android',
				'angle',
				'apple',
				'apps',
				'archive',
				'archive-o',
				'arrow',
				'at-line',
				'avatar',
				'avatar-o',
				'avatars',
				'avatars-o',
				'back',
				'backspace',
				'backup',
				'backup-restore',
				'barcode',
				'book',
				'bookmark',
				'bookmark-o',
				'bookmarks',
				'box',
				'box-block',
				'box-right',
				'brand',
				'brand-o',
				'building',
				'building-o',
				'camera',
				'camera-add',
				'camera-add-o',
				'camera-lens',
				'camera-lens-o',
				'camera-o',
				'camera-rotate',
				'card',
				'cardboard',
				'cardboard-o',
				'cardboard-off-o',
				'cart',
				'cart-o',
				'chat',
				'chat-bubble',
				'chat-bubble-o',
				'chat-list',
				'chat-list-o',
				'chat-o',
				'chat-smile',
				'chat-smile-o',
				'chat-smiles',
				'chat-smiles-o',
				'check',
				'checkbox',
				'checkbox-o',
				'check-round',
				'check-round-o',
				'choiceness',
				'choiceness-o',
				'chrome',
				'circle',
				'circle-o',
				'close',
				'close-round',
				'close-round-o',
				'clothes',
				'clothes-o',
				'cloud',
				'cloud-done',
				'cloud-download',
				'cloud-o',
				'cloud-off',
				'cloud-upload',
				'code-box',
				'coin',
				'coin-o',
				'comment',
				'comment-o',
				'community',
				'community-o',
				'countdown',
				'countdown-o',
				'creative',
				'creative-o',
				'crop',
				'crown',
				'crown-o',
				'cut',
				'DarkMode',
				'dashboard',
				'delete',
				'delete-close',
				'delete-line',
				'delete-line-o',
				'delete-o',
				'deliver',
				'deliver-o',
				'demo',
				'discover',
				'discover-o',
				'discuss-fill',
				'discuss-line',
				'dollar',
				'dollar-o',
				'done',
				'done-all',
				'douyin',
				'drop-down',
				'drop-up',
				'eject',
				'ellipse',
				'emoji',
				'emoji-o',
				'equalizer',
				'eraser',
				'eraser-o',
				'evaluate',
				'evaluate-o',
				'event-close',
				'event-done',
				'event-list',
				'explore',
				'explore-line',
				'explore-line-o',
				'explore-o',
				'extension',
				'extension-o',
				'eye',
				'eye-favor',
				'eye-favor-o',
				'eye-o',
				'eye-off',
				'eye-off-o',
				'facebook',
				'favorite',
				'favorite-o',
				'female',
				'file',
				'file-copy',
				'file-copy-o',
				'file-o',
				'file-text',
				'file-text-o',
				'filter',
				'fingerprint',
				'first-page',
				'flag',
				'flag-o',
				'flash-close',
				'flash-off',
				'flash-on',
				'flash-open',
				'folder',
				'folder-add',
				'folder-o',
				'folder-special',
				'forward',
				'fullscreen',
				'fullscreen-exit',
				'game',
				'game-o',
				'git-commit',
				'git-commit-o',
				'github',
				'github-circle',
				'goods',
				'goodsnew',
				'goodsnew-o',
				'goods-o',
				'GooglePlaylogo',
				'grid',
				'grid-o',
				'group',
				'group-o',
				'guanli',
				'headset',
				'headset-mic',
				'help',
				'help-o',
				'home',
				'home-2',
				'home-2-o',
				'home-3',
				'home-3-o',
				'home-4',
				'home-4-o',
				'home-community',
				'home-dot',
				'home-dot-o',
				'home-line',
				'home-line-o',
				'home-o',
				'home-sm',
				'home-smile',
				'home-smile-o',
				'home-smline',
				'home-smline-o',
				'home-sm-o',
				'hotel',
				'hotel-o',
				'huohu',
				'IE',
				'image-text',
				'image-text-o',
				'import-export',
				'info',
				'info-o',
				'input',
				'input-o',
				'keyboard',
				'kinds',
				'last-page',
				'layout',
				'layout-o',
				'LightMode',
				'link',
				'link-off',
				'loader-fill',
				'loading',
				'loading1',
				'loading2',
				'location-off',
				'location-off-o',
				'location-on',
				'location-on-o',
				'lock',
				'lock-o',
				'lock-open',
				'logout',
				'loop',
				'magic',
				'magic-o',
				'mail',
				'mail-o',
				'male',
				'mic',
				'mic-none',
				'mic-off',
				'miniprogram',
				'mobile',
				'mobile-o',
				'moneybag',
				'moneybag-o',
				'more',
				'more-tag',
				'move',
				'move-round',
				'move-round-o',
				'music',
				'music-off',
				'my',
				'my-o',
				'near-me',
				'near-me-o',
				'not',
				'notice',
				'notice-active',
				'notice-active-o',
				'notice-o',
				'notice-off',
				'notice-off-o',
				'numcode',
				'order',
				'order-o',
				'paint',
				'paint-o',
				'palette',
				'palette-o',
				'pause',
				'pause-circle',
				'person',
				'person-add',
				'person-add-o',
				'person-o',
				'person-pin-circle',
				'person-pin-circle-o',
				'phone',
				'phone-call',
				'pic',
				'pic-o',
				'pin-drop',
				'pin-drop-o',
				'place',
				'place-o',
				'play-arrow',
				'play-circle',
				'play-circle-o',
				'popover',
				'popover-o',
				'present',
				'present-o',
				'progress',
				'qq',
				'qr-code-fill',
				'qr-code-line',
				'quill',
				'quill-o',
				'radio',
				'radiobox',
				'radiobox-o',
				'recharge',
				'recharge-o',
				'record',
				'record-o',
				'redo',
				'redpacket',
				'redpacket-o',
				'refresh',
				'repair',
				'repair-o',
				'repeat',
				'replay',
				'reply',
				'reply-all',
				'road-map',
				'road-map-o',
				'round',
				'round-angle',
				'round-angle-o',
				'round-arrow-line',
				'round-box',
				'safe',
				'safe-check',
				'safe-check-o',
				'safe-flash',
				'safe-flash-o',
				'safe-key',
				'safe-key-o',
				'safe-o',
				'save',
				'save-o',
				'scan',
				'scissors',
				'search',
				'search-line',
				'searchlist',
				'search-o',
				'search-sm',
				'service',
				'service-fill',
				'service-o',
				'set',
				'set-list',
				'set-o',
				'settings',
				'settings-o',
				'share',
				'share-line-o',
				'shengji',
				'shopping-cart',
				'shopping-cart-o',
				'show',
				'show-o',
				'shuffle',
				'sip',
				'sip-o',
				'skip-next',
				'skip-previous',
				'slack',
				'slack-square',
				'sort',
				'sort-order',
				'sound',
				'sponsor',
				'sponsor-o',
				'star',
				'star-half',
				'star-o',
				'stock',
				'stop',
				'store',
				'store-0',
				'store-2',
				'store-2-o',
				'sub-left',
				'sub-right',
				'subtitles',
				'subtitles-o',
				'sync-alt',
				'tag',
				'tag-o',
				'taobao',
				'terminal',
				'terminal-o',
				'thumb-down',
				'thumb-down-o',
				'thumb-up',
				'thumb-up-line',
				'thumb-up-line-o',
				'thumb-up-o',
				'ticket',
				'ticket-o',
				'time',
				'time-o',
				'timer',
				'title',
				'titles',
				'toggle',
				'toggle-o',
				'topbar',
				'translate',
				'tree',
				'Tt',
				'twiter',
				'cicon-community-o',
				'undo',
				'unfold-less',
				'unfold-more',
				'upstage',
				'upstage-o',
				'view-agenda',
				'view-array',
				'view-carousel',
				'view-column',
				'view-day',
				'view-headline',
				'view-list',
				'view-module',
				'view-quilt',
				'volume',
				'volume-off',
				'warn',
				'warn-o',
				'wechat-pay',
				'weibo-fill',
				'weibo-o',
				'weixin',
				'whatshot',
				'whatshot-o',
				'wifi',
				'wifi-off',
				'yamaxun',
				'zuoji'
			],
			page: 0
		};
	},
	methods: {
		copy(text) {
			this.$util.copyText(unescape(text.replace(/&#x/g, '%u').replace(/;/g, '')));
		}
	}
};
</script>

<style lang="scss">
.ui-icon-list {
	.ui-item {
		padding: 10rpx;
		position: relative;
		overflow: hidden;
		transition: $transition-base;
		text-align: center;
		border-radius: $radius;

		.copy-layer {
			position: absolute;
			// background-color: #FFFFFF;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			opacity: 0;
			transition: $transition-base;
			padding-bottom: 0rpx;

			view {
				flex: 1;
				text-align: center;
			}
		}
	}
}
</style>
